<template>
    <div class="search-box">
        <nut-searchbar v-model="searchValue" background="#f5f5f5" input-background="#fff" clearable>
            <template v-slot:leftin>
                <Search2 />
            </template>
        </nut-searchbar>
        <div class="banner">
            <img src="https://cxj.szzkba.cn/upload/i/2024/07/23/101642.png" alt="">
            <div>家电焕新季</div>
            <span>360°无死角深度清洁</span>
        </div>
        <div class="itemize">
            <div class="item" v-for="(item, index) in list"
                @click="jumpTo('/packageA/pages/order/index?id=' + (Number(item.value) + 1))">
                <span :class="'c' + index">
                    <img :src="item.extend" alt="">
                </span>
                <p>{{ item.label }}</p>
            </div>
        </div>
        <div class="entry flex-a flex-b">
            <div class="left" @click="jumpTo('/packageA/pages/order/index?id=1')">
                <div class="title">家电焕新季</div>
                <span class="info">360°无死角深度清洁</span>
                <div class="img">
                    <img src="https://cxj.szzkba.cn/upload/i/2024/07/23/134213_2.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="top flex" @click="jumpTo('/packageA/pages/order/index?id=3')">
                    <div>
                        <span class="title">家电维修</span>
                        <span class="info">上门维修真省心</span>
                    </div>
                    <div>
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/23/134213.png" alt="">
                    </div>
                </div>
                <div class="bottom flex" @click="jumpTo('/packageA/pages/order/index?id=2')">
                    <div>
                        <span class="title">专场钜惠</span>
                        <span class="info">家庭保洁9元起</span>
                    </div>
                    <div>
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/23/134213_1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="product-box">
            <div class="p-title">精选推荐</div>
            <div class="p-list">
                <div class="p-item flex-a" v-for="item in serviceList"
                    @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">
                    <div class="p-left">
                        <img :src="item.remark" alt="">
                    </div>
                    <div class="p-right">
                        <div class="t flex-a flex-b">
                            <div>{{ item.project_Name }}</div>
                            <div class="price">￥{{ item.mini_Amount }}</div>
                        </div>
                        <div class="i">已售：823 | 好评：100%</div>
                        <div class="s flex-a">
                            <span>售后保障</span>
                            <span>立减20元</span>
                        </div>
                        <div class="f flex-a flex-b">
                            <div class="price">￥{{ item.mini_Amount }}</div>
                            <div class="btn">立即预约</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { toRefs, reactive, onMounted } from 'vue';
import { Searchbar } from '@nutui/nutui-taro';
import { Search2 } from '@nutui/icons-vue-taro';
import { getIndexService, getIndexClass } from '../../../api/index'
export default {
    components: {
        'nut-searchbar': Searchbar,
        Search2
    },
    setup() {
        const state = reactive({
            searchValue: "",
            list: [
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701.png',
                    text: '家电清洗',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_1.png',
                    text: '家政服务',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_2.png',
                    text: '家电维修',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_3.png',
                    text: '管道疏通',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_4.png',
                    text: '地面养护',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_5.png',
                    text: '保姆月嫂',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_6.png',
                    text: '窗帘清洗',
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/23/103701_7.png',
                    text: '绿化养护',
                }
            ],
            serviceList: [],
        });
        onMounted(() => {
            getList()
            getClass()
        })
        const getList = () => {
            getIndexService().then(res => {
                if (res.code == 0) {
                    let arr = res.data.list, list = []
                    arr.forEach(item => {
                        if (item.project_Tag == 1) {
                            list.push(item)
                        }
                    });
                    state.serviceList = list
                }
            })
        }
        const getClass = () => {
            getIndexClass({ ID: 12 }).then(res => {
                if (res.code == 0) {
                    state.list = res.data.resysDictionary.sysDictionaryDetails
                }
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({
                url: path
            })
        }
        return {
            ...toRefs(state), getList, jumpTo, getClass
        };
    }
};
</script>
<style lang="scss">
.search-box {
    .banner {
        position: relative;
        padding: 0 32rpx;

        img {
            width: 100%;
            height: 300rpx;
        }

        div {
            position: absolute;
            color: #fff;
            font-size: 50rpx;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
        }

        span {
            position: absolute;
            color: #333;
            font-size: 24rpx;
            left: 50%;
            top: 65%;
            transform: translate(-50%, -50%);
            display: inline-block;
            width: 260rpx;
            text-align: center;
            height: 45rpx;
            line-height: 45rpx;
            background: linear-gradient(to right, #45FED2, #B5FD67, #E4FF1F);
            border-radius: 50rpx;
        }
    }

    .itemize {
        margin-top: 30rpx;
        padding: 0 32rpx;

        .item {
            display: inline-block;
            width: 25%;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 30rpx;

            span {
                padding: 20rpx 25rpx;
                border-radius: 20rpx;
                background: red;
                display: inline-block;

                img {
                    width: 50rpx;
                    height: 50rpx;
                }
            }

            .c0 {
                background: #FB6567;
            }

            .c1 {
                background: #5290FB;
            }

            .c2 {
                background: #FB8D5B;
            }

            .c3 {
                background: #25DCA2;
            }

            .c4 {
                background: #FB8D5B;
            }

            .c5 {
                background: #25DCA2;
            }

            .c6 {
                background: #FB6567;
            }

            .c7 {
                background: #5290FB;
            }

            p {
                font-size: 24rpx;
            }
        }
    }

    .entry {
        padding: 0 32rpx;

        .left {
            width: 49%;
            background: #E8FFF4;
            border-radius: 10rpx;
            height: 350rpx;
            box-sizing: border-box;

            .img {
                text-align: center;
                margin-top: 100rpx;

                img {
                    width: 80%;
                    height: 150rpx;
                }
            }
        }

        .right {
            width: 49%;

            .top {
                background: #F4FCFF;
                height: 165rpx;
                border-radius: 10rpx;
                box-sizing: border-box;
                margin-bottom: 20rpx;

                img {
                    width: 80rpx;
                    height: 140rpx;
                    margin: 15rpx 0 0 70rpx;
                }
            }

            .bottom {
                background: #FFF4F4;
                height: 165rpx;
                border-radius: 10rpx;
                box-sizing: border-box;

                img {
                    width: 140rpx;
                    height: 140rpx;
                    margin: 15rpx 0 0 40rpx;
                }
            }
        }

        .title {
            font-size: 24rpx;
            margin: 10rpx 0 10rpx 20rpx;
        }

        .info {
            color: #999;
            font-size: 20rpx;
            margin: 0 0 0 20rpx;
        }
    }

    .product-box {
        padding: 0 32rpx;

        .p-title {
            font-size: 34rpx;
            font-weight: bold;
            margin: 20rpx 0 30rpx 0;
        }

        .p-list {
            .p-item {
                margin-bottom: 20rpx;

                .p-left {
                    margin-right: 20rpx;
                    width: 200rpx;

                    img {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 10rpx;
                    }
                }

                .p-right {
                    width: calc(100% - 220rpx);

                    .t {
                        font-size: 30rpx;

                        .price {
                            color: #F22F5C;
                            font-size: 32rpx;
                        }
                    }

                    .i {
                        margin: 20rpx 0;
                        font-size: 26rpx;
                        color: #B3B3B3;
                    }

                    .s {
                        font-size: 24rpx;
                        margin-bottom: 10rpx;

                        span:first-child {
                            color: #25DCA2;
                            padding: 4rpx 10rpx;
                            border-radius: 5rpx;
                            background: #F2FEF8;
                            margin-right: 10rpx;
                        }

                        span:last-child {
                            color: #FB8D5B;
                            padding: 4rpx 10rpx;
                            border-radius: 5rpx;
                            background: #FFF8F5;
                        }
                    }

                    .f {
                        .price {
                            color: #F22F5C;
                            font-size: 32rpx;
                        }

                        .btn {
                            background: #21C38F;
                            border-radius: 50rpx;
                            color: #fff;
                            font-size: 24rpx;
                            width: 120rpx;
                            text-align: center;
                            height: 55rpx;
                            line-height: 55rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>